<template>
    <div class="foo">
        <el-slider v-model="PlayBack_data.the_num" :max="PlayBack_data.max_num" :show-tooltip="false"
            @input="sliderChange"></el-slider>
        <!-- 预加载进度 -->
        <!-- <div class="preload_cont" :style="{ width: `${PlayBack_data.preload_num}%` }"></div> -->
        <div class="play_back_body_top" :style="{
            display: pageVal == 2 ? 'block' : 'none'
        }">
            <div class="play_back_body_top_one" :style="{
                background: themeName !== 'dark' ? `linear-gradient(
              to bottom,
              ${PlayBack_data.bgColor} -100%,
              white 60%,
              white 100%
            )`:'#2b2b2b',
                transform: pageVal == 2 ? 'translateY(0)' : 'translateY(3000px)',
            }">
                <div class="left">
                    <div :class="['zhen', PlayBack_data.status ? 'zhuan' : '']">
                        <img src="../assets/image/needle-ab.png" alt="" />
                    </div>
                    <div class="disc">
                        <div class="disc_img">
                            <div :class="['music_img', PlayBack_data.status ? 'yes' : 'no']">
                                <img :src="had_music_Arr() && music_Arr[PlayBack_data.index_one].arr[
                                    PlayBack_data.index_two
                                ].img
                                    " alt="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="music_title">
                        {{
                            had_music_Arr() ? music_Arr[PlayBack_data.index_one].arr[PlayBack_data.index_two]
                            .name : '-'
                        }}
                    </div>
                    <div class="music_gs_name">
                        歌手:{{
                            had_music_Arr() ? music_Arr[PlayBack_data.index_one].arr[PlayBack_data.index_two]
                            .singer : '-'
                        }}
                    </div>
                    <div class="lyric_body">
                        <el-scrollbar ref="scrollbarRef" :always="true" height="100%" @scroll="scrollChange">
                            <div style="padding-bottom: 200px; padding-top: 150px">
                                <div :class="[
                                    'lyric_item',
                                    PlayBack_data.the_text_index == index
                                        ? 'the_text_index'
                                        : '',
                                ]" v-for="(item, index) in PlayBack_data.textShowArr" :key="index">
                                    <span :class="[
                                        PlayBack_data.go_index == index ? 'go_index_text' : '',
                                    ]">
                                        {{ item.text }}
                                    </span>
                                </div>
                            </div>
                        </el-scrollbar>
                        <div class="lyric_go">
                            <div class="icons" @click="
                                sliderChange(
                                    PlayBack_data.textShowArr[PlayBack_data.go_index].time
                                )
                                ">
                                <svg t="1703657551103" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6983" width="18" height="18">
                                    <path
                                        d="M902.420317 544.833016l-585.142857-357.587302v715.174603l585.142857-357.587301z"
                                        p-id="6984" fill="#333333"></path>
                                </svg>
                            </div>
                            <div class="lyric_go_num" v-if="PlayBack_data.textShowArr[PlayBack_data.go_index]">
                                {{
                                    formatTime(PlayBack_data.textShowArr[PlayBack_data.go_index].time)
                                }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="play_back_body_bottom">
            <div class="btns_cont">
                <svg t="1708584587145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="49334" width="20" height="20">
                    <path
                        d="M700 192c92.8 0 166.4 72.8 166.4 166.4 0 129.6-133.6 251.2-336.8 435.2l-17.6 16-17.6-16C291.2 609.6 157.6 488 157.6 358.4c0-92.8 72.8-166.4 166.4-166.4 52.8 0 104.8 24 140 64.8l48.8 56.8 48.8-56.8c33.6-40 86.4-64.8 138.4-64.8m0-64c-72.8 0-142.4 33.6-188 87.2C466.4 162.4 396.8 128 324 128c-128.8 0-230.4 100.8-230.4 230.4 0 157.6 142.4 287.2 357.6 482.4L512 896l60.8-55.2c215.2-196 357.6-324.8 357.6-482.4 0-128.8-100.8-230.4-230.4-230.4z"
                        p-id="49335" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                </svg>
                <div class="btns_left" @click="musicToggle(1)">
                    <svg t="1703657664517" class="icon" viewBox="0 0 1076 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8951" width="18" height="18">
                        <path class="icons"
                            d="M842.90654365 456.55989899L176.29706665 71.70390899A46.415312 46.415312 0 0 0 106.66671865 111.96494899V881.61789499a46.415312 46.415312 0 0 0 69.645106 40.202006L842.89178565 537.00818599a46.444829 46.444829 0 0 0 0-80.418771z m0 0"
                            fill="#d33a31" p-id="8952"></path>
                        <path class="icons" d="M916.59546365 64.73792199l66.929551 0 0 862.144126-66.929551 0 0-862.144126Z"
                            fill="#d33a31" p-id="8953"></path>
                    </svg>
                </div>
                <div class="yes_no">
                    <div v-show="PlayBack_data.status" class="yes" @click="playBackChange(false)">
                        <svg t="1708583870347" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="46239" width="50" height="50">
                            <path
                                d="M874.058005 149.941995a510.06838 510.06838 0 1 0 109.740156 162.738976 511.396369 511.396369 0 0 0-109.740156-162.738976z"
                                fill="#d33a31" p-id="46240" data-spm-anchor-id="a313x.search_index.0.i83.1bec3a810yhP75"
                                class="selected"></path>
                            <path
                                d="M417.954256 281.533601a41.046923 41.046923 0 0 0-41.77128 40.201839v385.116718a41.892007 41.892007 0 0 0 83.663287 0v-385.116718a41.167649 41.167649 0 0 0-41.892007-40.201839zM606.045744 281.533601a41.046923 41.046923 0 0 0-41.77128 40.201839v385.116718a41.892007 41.892007 0 0 0 83.663287 0v-385.116718a41.167649 41.167649 0 0 0-41.892007-40.201839z"
                                fill="#FFFFFF" p-id="46241"></path>
                        </svg>
                    </div>
                    <div v-show="!PlayBack_data.status" class="no" @click="playBackChange(true)">
                        <svg t="1708583731431" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="43390" width="50" height="50">
                            <path
                                d="M0 512C0 229.218462 229.179077 0 512 0c282.781538 0 512 229.179077 512 512 0 282.781538-229.179077 512-512 512-282.781538 0-512-229.179077-512-512z m707.032615-34.264615c-36.903385-27.569231-87.906462-60.258462-142.020923-91.057231-54.626462-31.113846-108.307692-57.895385-150.055384-74.830769-20.125538-8.152615-36.864-13.784615-48.955077-16.46277-16.147692 54.075077-14.729846 373.76 0.472615 433.23077a382.582154 382.582154 0 0 0 46.08-16.187077c41.905231-17.171692 95.940923-44.110769 150.685539-74.870154 54.862769-30.877538 106.259692-63.330462 143.36-90.663385 18.156308-13.390769 32.374154-25.127385 41.708307-34.461538a381.243077 381.243077 0 0 0-41.275077-34.658462z"
                                fill="#d33a31" p-id="43391"></path>
                        </svg>
                    </div>
                </div>
                <div class="btns_right" @click="musicToggle(2)">
                    <svg t="1703657664517" class="icon" viewBox="0 0 1076 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8951" width="18" height="18">
                        <path class="icons"
                            d="M842.90654365 456.55989899L176.29706665 71.70390899A46.415312 46.415312 0 0 0 106.66671865 111.96494899V881.61789499a46.415312 46.415312 0 0 0 69.645106 40.202006L842.89178565 537.00818599a46.444829 46.444829 0 0 0 0-80.418771z m0 0"
                            fill="#d33a31" p-id="8952"></path>
                        <path class="icons" d="M916.59546365 64.73792199l66.929551 0 0 862.144126-66.929551 0 0-862.144126Z"
                            fill="#d33a31" p-id="8953"></path>
                    </svg>
                </div>
                <!-- 分享 -->
            </div>
            <div class="play_back_body_bottom_left">
                <div class="play_back_body_bottom_left_scrollbar">
                    <div class="one_conts">
                        <div class="imgs">
                            <img :src="had_music_Arr() && music_Arr[PlayBack_data.index_one].arr[
                                PlayBack_data.index_two
                            ].img
                                " alt="" />
                            <div class="icons" @click="pageVal = pageVal == 2 ? 1 : 2">
                                

                                <svg v-if="pageVal == 1" t="1708592664405" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="53151" width="18" height="18">
                                    <path d="M963.2 614.4L512 134.4l-451.2 480L0 547.2 512 0l512 547.2-60.8 67.2z"
                                        fill="#ffffff" p-id="53152"></path>
                                </svg>
                                <svg v-else t="1708592320696" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="51919" width="18" height="18">
                                    <path d="M963.2 0L1024 67.2 512 614.4 0 67.2 60.8 0 512 480 963.2 0z" fill="#ffffff"
                                        p-id="51920"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="music_cont ell">
                            <div class="title">
                                {{
                                    had_music_Arr() ? music_Arr[PlayBack_data.index_one].arr[
                                        PlayBack_data.index_two
                                    ].name : '-'
                                }}
                                - <span class="name">
                                    {{
                                        had_music_Arr() ? music_Arr[PlayBack_data.index_one].arr[
                                            PlayBack_data.index_two
                                        ].singer : '-'
                                    }}
                                </span>
                            </div>
                            <div class="music_time">
                                <span class="the_num">{{ formatTime(PlayBack_data.the_num) }}</span>
                                / <span class="max_num">
                                    {{
                                        had_music_Arr() ? music_Arr[PlayBack_data.index_one].arr[PlayBack_data.index_two]
                                        .time : ''
                                    }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right_icons">
                <!-- 随机播放 -->
                <div v-if='PlayBack_data.loopType == 3' class="loop" @click="changeLoopType">
                    <svg t="1708587423572" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="50745" width="22" height="22">
                        <path
                            d="M914.2 705L796.4 596.8c-8.7-8-22.7-1.8-22.7 10V688c-69.5-1.8-134-39.7-169.3-99.8l-45.1-77 47-80.2c34.9-59.6 98.6-97.4 167.4-99.8v60.1c0 11.8 14 17.9 22.7 10l117.8-108.1c5.8-5.4 5.8-14.6 0-19.9L796.4 165c-8.7-8-22.7-1.8-22.7 10v76H758c-4.7 0-9.3 0.8-13.5 2.3-36.5 4.7-72 16.6-104.1 35-42.6 24.4-78.3 59.8-103.1 102.2L513 432l-24.3-41.5c-24.8-42.4-60.5-77.7-103.1-102.2C343 263.9 294.5 251 245.3 251H105c-22.1 0-40 17.9-40 40s17.9 40 40 40h140.3c71.4 0 138.3 38.3 174.4 99.9l47 80.2-45.1 77c-36.2 61.7-103 99.9-174.4 99.9H105c-22.1 0-40 17.9-40 40s17.9 40 40 40l142 0.1h0.2c49.1 0 97.6-12.9 140.2-37.3 42.7-24.4 78.3-59.8 103.2-102.2l22.4-38.3 22.4 38.3c24.8 42.4 60.5 77.8 103.2 102.2 33.1 18.9 69.6 30.9 107.3 35.4 3.8 1.2 7.8 1.8 11.9 1.8l15.9 0.1v55c0 11.8 14 17.9 22.7 10L914.2 725c5.9-5.5 5.9-14.7 0-20z"
                            p-id="50746" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                    </svg>
                </div>
                <div v-else class="loop" @click="changeLoopType">
                    <svg t="1703659005447" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12075" width="24" height="24">
                        <path class="icons"
                            d="M659.63 879.59H364.29c-40.13 0-79.07-8.3-115.72-24.67-35.3-15.76-66.97-38.3-94.14-66.99-55.64-58.75-86.28-136.77-86.28-219.7 0-82.92 30.64-160.94 86.28-219.7 27.17-28.69 58.84-51.23 94.14-67 36.65-16.37 75.58-24.67 115.72-24.67h295.34c10.15 0 20.37 0.54 30.38 1.62 13.18 1.41 22.72 13.24 21.3 26.42s-13.24 22.72-26.42 21.3c-8.31-0.89-16.81-1.34-25.26-1.34H364.29c-66.03 0-128.18 27.23-175.01 76.67-47.16 49.8-73.13 116.1-73.13 186.69s25.97 136.89 73.13 186.69c46.82 49.44 108.97 76.67 175.01 76.67h295.34c66.03 0 128.18-27.23 175.01-76.67 47.16-49.8 73.13-116.1 73.13-186.69 0-13.25 10.75-24 24-24s24 10.75 24 24c0 82.92-30.64 160.94-86.28 219.69-27.17 28.69-58.84 51.23-94.14 67-36.65 16.38-75.59 24.68-115.72 24.68z"
                            :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'" p-id="12076"></path>
                        <path class="icons"
                            d="M896.94 260.76l-185.33-107c-15.48-8.94-34.83 2.23-34.83 20.11v214c0 17.88 19.35 29.05 34.83 20.11l185.33-107c15.48-8.94 15.48-31.28 0-40.22z"
                            :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'" p-id="12077"></path>
                    </svg>
                    <div v-show="PlayBack_data.loopType == 2" class="num">1</div>
                </div>
                <svg @click="drawerStatus = !drawerStatus" t="1703812589570" class="icon_draw" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7363" width="20" height="20">
                    <path
                        d="M960 864a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h832a32 32 0 0 1 32 32zM416 256h512a32 32 0 0 0 0-64H416a32 32 0 0 0 0 64z m512 256H96a32 32 0 0 0 0 64h832a32 32 0 0 0 0-64zM80.9 316.21a32 32 0 0 0 32.85-1.58l96-64a32 32 0 0 0 0-53.26l-96-64A32 32 0 0 0 64 160v128a32 32 0 0 0 16.9 28.21z"
                        :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'" p-id="7364"></path>
                </svg>
                <div class="ci">词</div>

            </div>
        </div>

        <el-drawer v-model="drawerStatus" :append-to-body="false" :show-close="false" size="420px"
            modal-class="drawer_modal" class="drawer_body">
            <div class="drawer_body_cont">
                <div class="title_cont">
                    <div class="title">当前播放</div>
                    <div class="tips">
                        <div class="l">
                            总{{ had_music_Arr() ? music_Arr[PlayBack_data.index_one].arr.length : 0 }}首
                        </div>
                        <div class="r" @click="changeMusic(PlayBack_data.index_one, 0)">
                            重新播放
                        </div>
                    </div>
                </div>
                <div class="list_scrollbar">
                    <el-scrollbar height="100%">
                        <div :class="[
                            'list_music_item',
                            PlayBack_data.index_two == index ? 'play_back' : '',
                        ]" v-for="(item, index) in music_Arr[PlayBack_data.index_one]
    .arr" :key="index" @click="changeMusic(PlayBack_data.index_one, index)">
                            <div v-if="PlayBack_data.index_two == index" class="play_back_icons">
                                <svg t="1703817463222" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="36121" width="10" height="10">
                                    <path
                                        d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z"
                                        fill="#ec4141" p-id="36122"></path>
                                </svg>
                            </div>
                            <div class="name">
                                <span>
                                    {{ item.name }}
                                </span>
                                <span class="tags"><span>SQ</span></span>
                            </div>
                            <div class="singer">
                                <span>{{ item.singer }}</span>
                                <div class="icons">
                                    <svg t="1703814962125" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="20018" width="16" height="16">
                                        <path
                                            d="M272.896 412.416l45.2864 45.2608-88.96 88.9856a179.2 179.2 0 0 0 249.0112 257.6896l4.4288-4.2752 88.9344-88.9856 45.2608 45.2608-88.96 88.9856A243.2 243.2 0 1 1 183.9616 501.4016l88.96-88.9856z m562.7392-218.752a243.2 243.2 0 0 1 0 343.936l-92.0576 92.032-45.2608-45.2608 92.0576-92.032a179.2 179.2 0 0 0-248.9856-257.7152l-4.4288 4.3008-92.0576 92.032L399.616 285.696l92.0576-92.032a243.2 243.2 0 0 1 343.936 0z"
                                            fill="#8a8a8a" p-id="20019"></path>
                                        <path
                                            d="M322.706147 649.639019m9.050967-9.050967l289.630938-289.630938q9.050967-9.050967 18.101933 0l27.152901 27.152901q9.050967 9.050967 0 18.101933l-289.630938 289.630938q-9.050967 9.050967-18.101933 0l-27.152901-27.152901q-9.050967-9.050967 0-18.101933Z"
                                            fill="#8a8a8a" p-id="20020"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="time">{{ item.time }}</div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </el-drawer>
        <audio v-show="false" ref="audio" :src="music_url" controls @pause="musicPause" @playing="musicPlaying"
            @timeupdate="musicTimeupdate" @progress="musicLoadeddata" @error="musicError" />
    </div>
</template>

<script setup lang="ts">
import Colorthief from "colorthief";
import { ElMessage } from "element-plus";
import { nextTick, onMounted, reactive, ref, watch, watchEffect, computed, onUnmounted } from "vue";
import useGlobalStore from "../../store/modules/global";
//获取小仓库对象
let globalStore = useGlobalStore();
const music_Arr = computed(() => globalStore.music_Arr);
const themeName = computed(() => globalStore.themeName);
function had_music_Arr() {
    // console.log(music_Arr)
    return music_Arr && music_Arr.value[0] && music_Arr.value[0].arr && music_Arr.value[0].arr.length > 0
}
const music_url = ref(""); //音乐地址
const audio = ref();
const scrollbarRef = ref();
let index_one: any= localStorage.getItem("PlayBackOneIndex") || 0;
let loopType: any = localStorage.getItem("PlayBackLoopType") || 1;
let index_two: any = localStorage.getItem("PlayBackTwoIndex") || 0;
const PlayBack_data = reactive({
    loopType, //循环方式 1:列表循环 2:单曲循环 3:随机
    textShowArr: [], //展示的歌词
    index_one, //第一层下标
    index_two, //第二层下标
    bgColor: "", //背景色
    status: false, //是否播放
    the_num: 0, //当前播放进度
    max_num: 0, //总时间
    preload_num: 0, //预加载百分比
    the_text_index: 0, //当前歌词下标
    go_index: 0, //歌词指示器的下标
});
const pageVal = ref(1); //页面标识 1:列表页 2:播放页
const pageTypeVal = ref(2); //页面类型 1:歌单 2:排行榜
const drawerStatus = ref(false); //播放列表抽屉状态

/* true:播放 false:暂停 */
function playBackChange(val) {
    if (!had_music_Arr()) return;
    PlayBack_data.status = val;
    if (val) {
        audio.value.play();
        /* 播放 */
    } else {
        /* 暂停 */
        audio.value.pause();
    }
}

/* 音乐预加载进度 */
function musicLoadeddata(params) {
    console.log(audio.value.buffered.end(0));
    calculatePercentage(
        Math.floor(audio.value.buffered.end(0)),
        PlayBack_data.max_num
    );
}

/* 音乐播放触发 */
function musicPlaying() {
    if (!had_music_Arr()) return;
    PlayBack_data.status = true;
}

/* 音乐暂停触发 */
function musicPause() {
    PlayBack_data.status = false;
}

/* 音乐播放中触发 */
function musicTimeupdate(val) {
    PlayBack_data.the_num = audio.value.currentTime.toFixed() - 0;
    const index = getIndex(PlayBack_data.the_num);
    PlayBack_data.the_text_index = index;
}
/* 音乐出错 */
function musicError() {
    showMessage("音乐已失效", 2000);
    musicPause();
}

// 定时器判断是否播放完成
let compInterTime = ref(0);
function musicIsComplete() {
    compInterTime.value = setInterval(() => {
        if (PlayBack_data.the_num >= PlayBack_data.max_num) {
            if (PlayBack_data.loopType == 1 || PlayBack_data.loopType == 3) {
                /* 列表循环 随机播放 */
                musicToggle(2);
            } else if (PlayBack_data.loopType == 2) {
                /* 单曲循环 */
                sliderChange(0);
            }
        }
    }, 600);
}

/* 音乐进度条改变触发 */
function sliderChange(val) {
    if (!had_music_Arr()) return;
    audio.value.currentTime = Math.floor(val);
    if (!PlayBack_data.status) {
        audio.value.play();
    }
}

/* 1:上一首 2:下一首 */
function musicToggle(val) {
    if (!had_music_Arr()) {
        return;
    }
    // 随机
    if (PlayBack_data.loopType == 3) {
        let len: number = music_Arr.value[PlayBack_data.index_one].arr.length;
        let mr = Math.random() * len;
        let num = Math.floor(mr);
        PlayBack_data.index_two = num;
    } else if (val == 1) {
        /* 上一首 */
        PlayBack_data.index_two =
            PlayBack_data.index_two == 0
                ? music_Arr.value[PlayBack_data.index_one].arr.length - 1
                : PlayBack_data.index_two - 1;
    } else if (val == 2) {
        /* 下一首 */
        PlayBack_data.index_two =
            PlayBack_data.index_two ==
                music_Arr.value[PlayBack_data.index_one].arr.length - 1
                ? 0
                : PlayBack_data.index_two + 1;
    }
    // 缓存
    localStorage.setItem("PlayBackTwoIndex", PlayBack_data.index_two);
    setMusic();
    nextTick(() => {
        musicPlaying();
    });
}

/* 更换音乐 */
function changeMusic(index_one, index_two) {
    PlayBack_data.index_one = index_one;
    PlayBack_data.index_two = index_two;
    drawerStatus.value = false;
    if (pageVal.value == 1) {
        pageVal.value = 2;
    }
    setMusic();
    nextTick(() => {
        musicPlaying();
    });
}

// 方便调用
(window as any)['changeMusic'] = function (index_two){
    PlayBack_data.index_one = 0;
    PlayBack_data.index_two = index_two;
    setMusic();
    nextTick(() => {
        musicPlaying();
    });
};

/* 修改歌曲播放顺序 */
function changeLoopType() {
    if (PlayBack_data.loopType == 1) {
        PlayBack_data.loopType = 2;
        showMessage("单曲循环");
    } else if (PlayBack_data.loopType == 2) {
        PlayBack_data.loopType = 3;
        showMessage("列表随机");
    } else if (PlayBack_data.loopType == 3) {
        PlayBack_data.loopType = 1;
        showMessage("列表循环");

    }
    localStorage.setItem("PlayBackLoopType", PlayBack_data.loopType);
}

/* 00:00 转换秒数 */
function timeConversion(time) {
    if (time) {
        let parts = time.split(":");
        return +parts[0] * 60 + +parts[1];
    } else {
        return 0;
    }
}

/* 秒数转换格式 00:00 */
function formatTime(time) {
    let minute = Math.floor(time / 60);
    let second = Math.floor(time % 60);
    return `${minute}:${second < 10 ? "0" + second : second}`;
}

/* 获取图片主色调 */
function getImgColor(imageUrl) {
    const colorthief = new Colorthief();
    var img = new Image();
    img.src = imageUrl;
    img.crossOrigin = "Anonymous";
    img.onload = async function () {
        const colors = await colorthief.getPalette(img, 3);
        PlayBack_data.bgColor = `rgba(${colors[0][0]},${colors[0][1]},${colors[0][2]})`;
    };
}

//设置音乐方法封装 并且存储到本地
function setMusic() {
    if (!had_music_Arr()) return;
    localStorage.setItem("PlayBackOneIndex", PlayBack_data.index_one);
    localStorage.setItem("PlayBackTwoIndex", PlayBack_data.index_two);
    setLyric();
    PlayBack_data.preload_num = 0;
    PlayBack_data.the_num = 0;
    PlayBack_data.max_num = timeConversion(
        music_Arr.value[PlayBack_data.index_one].arr[PlayBack_data.index_two].time
    );
    music_url.value =
        music_Arr.value[PlayBack_data.index_one].arr[PlayBack_data.index_two].src;
    getImgColor(
        music_Arr.value[PlayBack_data.index_one].arr[PlayBack_data.index_two].img
    );
}

/* 设置歌词 */
function setLyric() {
    if (!had_music_Arr()) return;
    const text_Arr =
        music_Arr.value[PlayBack_data.index_one].arr[
            PlayBack_data.index_two
        ].lrc.split("\n");
    PlayBack_data.textShowArr = [];
    text_Arr.forEach((item) => {
        let one_text = item.split("]");
        let time = one_text[0].split("[")[1];
        if (time) {
            PlayBack_data.textShowArr.push({
                time: timeConversion(time),
                text: one_text[1],
            });
        }
    });
    PlayBack_data.textShowArr.pop();
}

/* 设置歌词偏移量   */
function setOffset(index) {
    let offsetTwo = 50 * index;
    if (offsetTwo < 0) {
        offsetTwo = 0;
    }
    scrollbarRef.value.setScrollTop(offsetTwo);
}

/* 歌词滚动显示 前进歌词样式下标 */
function scrollChange({ scrollTop }) {
    let index = Math.floor(scrollTop / 50);
    PlayBack_data.go_index = index;
}

/* 获取高亮歌词下标 */
function getIndex(times) {
    for (var i = 0; i < PlayBack_data.textShowArr.length; i++) {
        if (times < PlayBack_data.textShowArr[i].time) {
            return i - 1;
        }
    }
    return PlayBack_data.textShowArr.length - 1;
}

/* 预加载进度百分比 */
function calculatePercentage(currentValue, totalValue) {
    if (totalValue === 0) {
        PlayBack_data.preload_num = 0;
    } else {
        PlayBack_data.preload_num = (currentValue / totalValue) * 100;
    }
}

/* 封装弹窗提醒 */
function showMessage(title, time = 500) {
    ElMessage({
        message: title,
        center: true,
        duration: time,
        appendTo: "#play_back_body",
        customClass: "play_back_body_message",
        grouping: true,
    });
}

/* 生命周期 */
onMounted(() => {
    setMusic();
    musicIsComplete();
});
// 组件卸载
onUnmounted(()=>{
    removeClearInterval();
});

const removeClearInterval = () => {
    if (compInterTime.value) {
        clearInterval(compInterTime.value);
        compInterTime.value = null;
    }

}

/* 监听音乐歌词下标是否改变 */
watch(
    () => PlayBack_data.the_text_index,
    () => {
        setOffset(PlayBack_data.the_text_index);
    }
);
</script>
<style lang="less">
.foo {
    .el-slider {
        width: 100%;
        height: 4px;
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        z-index: 10000;
        .el-slider__runway {
            background: transparent;
            margin: 0 20px 0 5px;
        }

        .el-slider__bar {
            background-color: #d33a31;
            border-radius: 8px;
            height: 3px;
        }

        .el-slider__button {
            height: 10px;
            width: 10px;
            border: none;
            background: transparent;
            margin-bottom: 3px;
        }

        &:hover {
            .el-slider__button {
                background-color: #d33a31;
            }
        }
    }
}
</style>

<style scoped lang="less">
.foo {
    height: 72px;
    width: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0px 10px 10px 0px #000;
    box-sizing: border-box;
    background-color: @footerBg;
    position: relative;
}

.play_back_body_top {
    width: 100%;
    height: calc(100% - 72px);
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 1000;

    .play_back_body_top_one {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        z-index: 1000;
        transition: all 0.4s;

        .left {
            position: relative;
            display: flex;
            justify-content: center;
            flex: 1.2;
            height: 100%;

            .disc {
                width: 330px;
                height: 330px;
                border-radius: 50%;
                background-color: rgba(0, 0, 0, 0.12);
                margin-top: 150px;
                display: flex;
                align-items: center;
                justify-content: center;

                .disc_img {
                    width: 330px;
                    height: 330px;
                    background: url(../assets/image/disc.png) no-repeat;
                    background-size: 100% auto;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .music_img {
                        width: 210px;
                        height: 210px;
                        border-radius: 50%;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        animation: rotate 20s linear infinite;
                    }

                    .no {
                        animation-play-state: paused;
                    }

                    .yes {
                        animation-play-state: running;
                    }

                    @keyframes rotate {
                        from {
                            transform: rotate(0deg);
                        }

                        to {
                            transform: rotate(360deg);
                        }
                    }
                }
            }

            .zhen {
                position: absolute;
                width: 95px;
                left: 47%;
                top: 68px;
                transform: rotate(-40deg);
                transform-origin: 16px 20px;
                transition: all 0.5s;
                z-index: 9999;
            }

            .zhuan {
                transform: rotate(-5deg);
            }
        }

        .right {
            flex: 1;
            height: 100%;

            .music_title {
                position: relative;
                left: -2px;
                font-size: 26px;
                // font-weight: 700;
                // font-family: monospace;
                color: @color;
                margin-top: 68px;
                padding-right: 50px;
                -webkit-line-clamp: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                margin-bottom: 8px;
            }

            .music_gs_name {
                color: #868388;
                font-size: 14px;
                // font-family: monospace;
                margin-bottom: 35px;
            }

            .lyric_body {
                position: relative;
                width: 370px;
                height: 370px;
            }

            .lyric_go {
                position: absolute;
                left: 0;
                top: 150px;
                width: 100%;
                height: 22px;
                display: none;
                align-items: center;
                justify-content: flex-end;

                .icons {
                    padding-top: 3px;
                    margin-right: 19px;
                    cursor: pointer;
                }

                .lyric_go_num {
                    position: absolute;
                    font-size: 14px;
                    left: 0;
                    top: 49.5%;
                    transform: translate(-120%, -50%);
                    color: @hoverColor;
                }
            }

            .lyric_go::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 10%;
                height: 1px;
                background: linear-gradient(to right,
                        rgba(0, 0, 0, 0.32) 0%,
                        transparent 90%);
            }

            .lyric_go::after {
                content: "";
                position: absolute;
                right: 12%;
                top: 50%;
                transform: translateY(-50%);
                width: 20%;
                height: 1px;
                background: linear-gradient(to left,
                        rgba(0, 0, 0, 0.32) 0%,
                        transparent 90%);
            }
        }

        .lyric_item {
            line-height: 22px;
            color: #646464;
            font-size: 15px;
            height: 50px;

            // margin-bottom: 5px;
        }

        .the_text_index {
            font-weight: 700;
            color: @hoverColor;
            font-size: 18px;
            font-family: monospace;
        }

        .lyric_body:hover .go_index_text {
            color: #d33a31;
        }

        .lyric_body:hover .lyric_go {
            display: flex !important;
        }

        .left_top_icons {
            position: absolute;
            left: 32px;
            top: 28px;
            cursor: pointer;
        }
    }

    .play_back_body_list {
        height: 100%;

        .nav {
            width: 100%;
            height: 60px;
            background-color: #f5f5f5;
            padding: 0 20px;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .icons {
                margin-right: 5px;
            }

            .title {
                font-weight: 700;
                font-size: 18px;
                font-family: monospace;
            }
        }
    }
}

.play_back_body_bottom {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 2px;

    .btns_cont {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;

        svg {
            cursor: pointer;
        }

        .yes_no {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 35px;
            height: 35px;
            background-color: #f5f5f5;
            margin: 0 30px;
            border-radius: 50%;


            .yes,
            .no {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #d33a31;
                border-radius: 50%;
            }
        }

        .yes_no:hover {
            background-color: #e5e5e5;
        }

        .btns_left {
            padding-bottom: 1px;
            height: 35px;
            display: flex;
            align-items: center;
            transform: rotate(180deg);
            box-sizing: border-box;
            cursor: pointer;
            margin-left: 30px;
        }

        .btns_right {
            height: 35px;
            display: flex;
            align-items: center;
            padding-top: 1px;
            box-sizing: border-box;
            cursor: pointer;
            margin-right: 30px;
        }

        .btns_left:hover .icons,
        .btns_right:hover .icons {
            fill: #d33a31;
            color: #d33a31;
        }
    }

    .preload {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 3px;
        background-color: #e5e5e5;
        border-radius: 3px;
        overflow: hidden;

        .preload_cont {
            width: 60%;
            height: 100%;
            background-color: #cecece;
            transition: all 0.3s;
        }
    }

    .play_back_body_bottom_left {
        position: absolute;
        left: 0;
        top: 0;
        width: 40%;
        height: 70px;
        overflow: hidden;

        .play_back_body_bottom_left_scrollbar {
            transition: all 0.5s;
        }

        .one_conts {
            width: 100%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 10px;

            .imgs {
                position: relative;
                width: 48px;
                height: 48px;
                border-radius: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                margin-right: 10px;

                .icons {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.52);
                    display: none;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }
            }

            .imgs:hover .icons {
                display: flex;
            }

            .music_cont {
                width: calc(100% - 50px);

                .title {
                    font-size: 16px;
                    margin-bottom: 5px;
                    color: @color;
                }

                .name {
                    font-size: 14px;
                    color: @fzFontColor;
                }

                .music_time {
                    font-size: 12px;
                    color: @fzFontColor;
                }
            }
        }

        .two_conts {
            width: 40%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            position: absolute;
            z-index: 1000;
            left: 1px;
            top: -6px;
            cursor: pointer;

            .icons {
                margin-left: 25px;
                padding-top: 2px;
            }
        }
    }

    .right_icons {
        position: absolute;
        right: 25px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        display: flex;
        align-items: center;

        .ci:hover,
        .icon_draw:hover path,
        .loop:hover path,
        .loop:hover .num {
            fill: #d33a31;
            color: #d33a31;
        }

        .loop {
            position: relative;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            cursor: pointer;
            padding-right: 20px;

            .num {
                position: absolute;
                left: 11px;
                top: 54.5%;
                transform: translate(-50%, -50%) scale(0.8);
                font-size: 12px;
                color: @color;
            }
        }

        .ci {
            font-size: 14px;
            height: 35px;
            display: flex;
            align-items: center;
            cursor: pointer;
            font-family: "Courier New", Courier, monospace;
            color: @color;
            padding-left: 20px;
        }
    }
}

/* 弹窗样式 */
:deep(.play_back_body_message) {
    position: absolute;
    padding: 10px 25px;
    background-color: #444444;
    border-radius: 30px;
    // top: 500px !important;
    top: auto !important;
    bottom: 100px !important;
}

/* 抽屉样式 */
:deep(.drawer_modal) {
    position: fixed !important;
    background-color: transparent !important;
    height: calc(100% - 73px);
}

.drawer_body_cont {
    width: 100%;
    height: 100%;
    background-color: @fzBg;
    overflow: hidden;

    .title_cont {
        margin: 20px;
        margin-bottom: 0;
        padding-bottom: 15px;
        border-bottom: 1px solid #f2f2f2;
        box-sizing: border-box;

        .title {
            font-weight: 700;
            font-size: 20px;
            color: @color;
            margin-bottom: 10px;
        }

        .tips {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            color: @fzFontColor;
            .l{
                font-size:12px;
            }

            .r {
                font-size: 14px;
                color: #507daf;
                cursor: pointer;
            }
        }
    }

    .list_scrollbar {
        width: 100%;
        height: calc(100% - 90px);

        .list_music_item {
            position: relative;
            display: flex;
            align-items: center;
            height: 36px;
            padding-left: 20px;
            padding-right: 40px;
            box-sizing: border-box;
            font-size: 12px;
            cursor: pointer;

            .name {
                flex: 1;
                display: flex;
                align-items: center;
                color: @color;
                margin-right: 15px;

                span {
                    margin-right: 10px;
                    color:  @fzFontColor;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }

                .tags {
                    width: 17px;
                    font-size: 12px;
                    color: #d33a31;
                    border: 1px solid #d33a31;
                    border-radius: 2px;
                    padding: 0;
                    text-align: center;
                    height: 12px;

                    span {
                        color: #d33a31 !important;
                        line-height: 12px;
                        transform: scale(0.8);
                        margin: 0;
                    }
                }
            }

            .singer {
                display: flex;
                align-items: center;
                width: 121px;
                margin-right: 20px;

                span {
                    flex: 1;
                    margin-right: 10px;
                    color:  @fzFontColor;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }

                .icons {
                    padding-top: 5px;
                }
            }

            .time {
                color:  @fzFontColor;
            }
        }

        .list_music_item:nth-child(2n) {
            background-color: @fzItemBg;
        }

        .list_music_item:hover {
            background-color: @fzItemBg;
        }

        .list_music_item:hover .name span,
        .list_music_item:hover .singer span,
        .list_music_item:hover .time {
            color: @color;
        }

        .play_back {
            .play_back_icons {
                position: absolute;
                left: 5px;
                top: 11.5px;
            }
        }

        .play_back .name span,
        .play_back .singer span,
        .play_back .time {
            color: #d33a31 !important;
        }
    }
}

:deep(.drawer_modal .el-drawer) {
    height: calc(100% - 48px);
    top: 48px !important;
    right: 9px;
    box-shadow: 0px 0px 22px 1px rgba(0, 0, 0, 0.08);
}

:deep(.drawer_body .el-drawer__body) {
    padding: 0;
}

:deep(.drawer_body .el-drawer__header) {
    display: none;
}

:deep(.play_back_body_message .el-message__content) {
    color: #fff;
    font-size: 14px;
}

:deep(.play_back_body_message .el-icon) {
    display: none;
}

:deep(.play_back_body_message .el-badge) {
    display: none !important;
}
</style>




